<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="../public/css/public.css" />
		<link rel="stylesheet" type="text/css" href="css/shopdata.css" />
	</head>

	<body>
		<div class="load" v-bind:class="{'block':!loading,'none':loading}">
			<div class="csshub-loader">
				<div class="csshub-square"></div>
				<div class="csshub-square"></div>
				<div class="csshub-square"></div>
				<div class="csshub-square"></div>
				<div class="csshub-square"></div>
				<div class="csshub-square"></div>
				<div class="csshub-square"></div>
				<div class="csshub-square"></div>
				<div class="csshub-square"></div>
			</div>
		</div>
		<div class="none" v-bind:class="{'none':!loading,'block':loading}">
			<div class="show_shopinfo" v-show="shopinfopage">
				<div class="show_shopinfo_head">
					<div class="" @click="shopinfopage=false"></div>
					<div class="">商家详情</div>
				</div>
				<div class="show_shopinfo_body">
					<h6 class="show_shopinfo_body_title">活动与属性</h6>
					<div class="show_shopinfo_body_act1"><span>新</span>新用户下单立减20元</div>
					<div class="show_shopinfo_body_act2"><span>转</span>更多活动请见大转盘</div>

				</div>
				<div class="show_shopinfo_body">
					<h6 class="show_shopinfo_body_title">商家信息</h6>
					<div class="show_shopinfo_body_notice">欢迎新老顾客品尝，感谢您的支持！</div>
					<div class="show_shopinfo_body_adress">地址：{{shopdata.attributes.adress}}</div>
					<div class="show_shopinfo_body_time">营业时间：{{shophours.start}}:00-{{shophours.end}}:00</div>
				</div>
			</div>
			<div class="shop" v-show="!shopinfopage">
				<div class="shop_head">
					<div class="shop_head_top">
						<div class="back_last" @click="backpage()"></div>
					</div>
					<div class="shop_head_center">
						<div class="shop_head_center_left">
							<img :src="shopimg" />
						</div>
						<div class="shop_head_center_right">
							<h3 class="shopname" v-html="shopname"></h3>
							<div class="shopinfo">
								<div class="shopinfo_base">商家配送/30分钟送达/配送费￥{{sendprice}}</div>
								<div class="shopinfo_show" @click="shopinfopage=true"></div>
							</div>
							<div class="shopinfo_notice">
								公告：{{shopdata.attributes.notice}}
							</div>
						</div>
					</div>
					<div class="shop_head_bottom">
						活动：新用户全场立减20元，更多优惠请参与发现活动
					</div>
					<div class="shop_body_nav">
						<div class="shop_body_nav_left" v-bind:class="{'shop_body_nav_act':!showcomment}" @click="showcomment=false">商品</div>
						<div class="shop_body_nav_right" v-bind:class="{'shop_body_nav_act':showcomment}" @click="showcomment=true">评价 </div>
					</div>
				</div>
				<!--评价列表-->
				<div class="comment" v-show="showcomment">
					<div class="comment_grade">
						<div class="comment_grade_grade">
							<div>{{shopdata.attributes.grade}}</div>
							<div>综合评价</div>
						</div>
						<div class="comment_grade_star">
							<div><strong>服务态度</strong><span class="star" v-for="star in star"></span><strong>{{shopdata.attributes.grade}}</strong></div>
							<div><strong>菜品评价</strong><span class="star" v-for="star in star"></span><strong>{{shopdata.attributes.grade}}</strong></div>
						</div>
					</div>
					<div class="comment_list">
						<div class="comment_list_item">
							<div class="comment_list_item_img"><img src="img/tx1.jpg" /></div>
							<div class="comment_list_item_text">
								<div class="comment_list_item_text_name">
									<div class="comment_list_item_text_name_name">小美</div>
									<div class="comment_list_item_text_name_time">2017-04-02</div>
								</div>
								<div class="comment_list_item_text_star">
									<span></span><span></span><span></span><span></span><span></span>30分钟送达
								</div>
							</div>
						</div>
						<div class="comment_list_item">
							<div class="comment_list_item_img"><img src="img/tx2.jpg" /></div>
							<div class="comment_list_item_text">
								<div class="comment_list_item_text_name">
									<div class="comment_list_item_text_name_name">张信哲</div>
									<div class="comment_list_item_text_name_time">2017-04-02</div>
								</div>
								<div class="comment_list_item_text_star">
									<span></span><span></span><span></span>30分钟送达
								</div>
							</div>
						</div>
						<div class="comment_list_item">
							<div class="comment_list_item_img"><img src="img/tx3.jpg" /></div>
							<div class="comment_list_item_text">
								<div class="comment_list_item_text_name">
									<div class="comment_list_item_text_name_name">嘿嘿嘿</div>
									<div class="comment_list_item_text_name_time">2017-04-02</div>
								</div>
								<div class="comment_list_item_text_star">
									<span></span><span></span><span></span><span></span><span></span>30分钟送达
								</div>
							</div>
						</div>
						<div class="comment_list_item">
							<div class="comment_list_item_img"><img src="img/tx4.jpg" /></div>
							<div class="comment_list_item_text">
								<div class="comment_list_item_text_name">
									<div class="comment_list_item_text_name_name">小公主</div>
									<div class="comment_list_item_text_name_time">2017-04-02</div>
								</div>
								<div class="comment_list_item_text_star">
									<span></span><span></span><span></span><span></span><span></span>30分钟送达
								</div>
							</div>
						</div>
						<div class="comment_list_item">
							<div class="comment_list_item_img"><img src="img/tx5.jpg" /></div>
							<div class="comment_list_item_text">
								<div class="comment_list_item_text_name">
									<div class="comment_list_item_text_name_name">信仰</div>
									<div class="comment_list_item_text_name_time">2017-04-02</div>
								</div>
								<div class="comment_list_item_text_star">
									<span></span><span></span>30分钟送达
								</div>
							</div>
						</div>
						<div class="comment_list_item">
							<div class="comment_list_item_img"><img src="img/tx6.jpg" /></div>
							<div class="comment_list_item_text">
								<div class="comment_list_item_text_name">
									<div class="comment_list_item_text_name_name">别看我</div>
									<div class="comment_list_item_text_name_time">2017-04-02</div>
								</div>
								<div class="comment_list_item_text_star">
									<span></span><span></span><span></span><span></span>30分钟送达
								</div>
							</div>
						</div>
						<div class="comment_list_item">
							<div class="comment_list_item_img"><img src="img/tx7.jpg" /></div>
							<div class="comment_list_item_text">
								<div class="comment_list_item_text_name">
									<div class="comment_list_item_text_name_name">蜡笔小新</div>
									<div class="comment_list_item_text_name_time">2017-04-02</div>
								</div>
								<div class="comment_list_item_text_star">
									<span></span><span></span><span></span>30分钟送达
								</div>
							</div>
						</div>
						<div class="comment_list_item">
							<div class="comment_list_item_img"><img src="img/tx8.jpg" /></div>
							<div class="comment_list_item_text">
								<div class="comment_list_item_text_name">
									<div class="comment_list_item_text_name_name">ROSE</div>
									<div class="comment_list_item_text_name_time">2017-04-02</div>
								</div>
								<div class="comment_list_item_text_star">
									<span></span><span></span><span></span><span></span>30分钟送达
								</div>
							</div>
						</div>
					</div>
				</div>
				<!--商品列表-->
				<div class="product" v-show="!showcomment">
					<div class="shop_body">
						<div class="shop_body_left">
							<a @click="changeBgc($index)" v-bind:class="{'bgc':bgc==$index}" href="#id{{$index}}" v-for="item in productclassify">
								<div class="shop_body_left_item">{{item}}</div>
							</a>
						</div>
						<div class="shop_body_right">
							<div class="shop_body_right_item" v-for="i in productclassify">
								<h3 id="id{{$index}}" class="shop_body_right_item_head">{{i}}</h3>
								<div class="shop_body_right_item_info" v-for="n in classify" v-if="n.attributes.classify.indexOf(i)>=0">
									<div class="shop_body_right_item_info_left">
										<img :src="n.attributes.productimg" />
									</div>
									<div class="shop_body_right_item_info_right">
										<div class="shop_body_right_item_info_right_name">{{n.attributes.productname}}</div>
										<div class="shop_body_right_item_info_right_top">
											<div class="shop_body_right_item_info_right_remarks">{{n.attributes.remark}}</div>
											<div class="shop_body_right_item_info_right_data"><span>月销售{{n.attributes.salenum}}份</span><span>好评率{{n.attributes.grade}}%</span></div>
										</div>
										<div class="shop_body_right_item_info_right_price">
											<div><strong>￥</strong><b>{{n.attributes.price}}</b></div>
											<div><img src="img/addicon.png" @click="add(n.id,n.attributes.productname,n.attributes.price)" /></div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="shop_foot">
					<div class="shop_foot_carticon" v-bind:class='{"hasproduct":count>0}'>
						<span class="product_num">{{count}}</span>
					</div>
					<div class="shop_foot_price">
						<div class="">￥{{total}}</div>
						<div>配送费￥{{sendprice}}</div>
					</div>
					<div class="shop_foot_notpay" v-if="moremoney>0">
						还差￥{{moremoney}}元起送
					</div>
					<div class="shop_foot_pay" @click="pay()" v-if="moremoney<=0">
						结算
					</div>
				</div>
			</div>
		</div>
		<script src="../public/js/Zepto_min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../public/js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script src="../public/js/public.js" type="text/javascript" charset="utf-8"></script>
		<script src="//cdn1.lncld.net/static/js/2.1.2/av-min.js"></script>
		<script src="js/shopdata.js" type="text/javascript" charset="utf-8"></script>
	</body>

</html>